<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from './../resize'
  import { req } from '../../../../../api/base/BaseApi'
  // import index from './index'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '250px'
      }
    },
    data() {
      return {
        slopeData: [],
        date: [],
        elements: [],
        element: undefined,
        count: 0,
        chart: undefined
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
        this.getChartData()
        setInterval(() => {
          this.getChartData()
        }, 20000)
        setTimeout(() => {
          setInterval(() => {
            this.setChartData()
          }, 1000)
        }, 1000)
      })
    },
    beforeDestroy() {
      // if (!this.chart) {
      //   return
      // }
      // this.chart.dispose()
      // this.chart = null
      // this.slopeData = []
      // this.date = []
      // this.element = undefined
      // this.count = 0
    },
    methods: {
      getChartData() {
        req('/api/sys/auth/monitor/slope', 'POST', '').then(response => {
          const temp = response.data
          for (let i = 0; i < temp.length; i++) {
            this.elements.push(temp[i])
          }
        }).catch(() => console.log('page request error'))
      },
      setChartData() {
        this.element = this.elements.shift()
        if (this.count < 20) {
          this.date.push(this.element.value[0])
          this.slopeData.push(this.element)
          this.count++
        } else {
          this.date.shift()
          this.slopeData.shift()
          this.date.push(this.element.value[0])
          this.slopeData.push(this.element)
        }
        this.chart.setOption({
          xAxis: {
            data: this.date
          },
          series: [
            {
              data: this.slopeData
            }
          ]
        })
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          backgroundColor: '#02152f',
          title: {
            text: '倾斜',
            textStyle: {
              color: '#ffffff'
            }
          },
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              const params1 = params[0]
              const date = new Date(params1.name)
              return '日期：' + date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + '<br/>' + '倾斜测点1：' + params1.value[1]
            },
            axisPointer: {
              animation: false
            }
          },
          legend: {
            data: ['倾斜测点1'],
            inactiveColor: '#5e5e5e',
            textStyle: {
              color: '#ffffff'
            }
          },
          xAxis: {
            type: 'category',
            name: '时间',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            boundaryGap: false,
            // splitLine: {
            //   show: false
            // },
            data: this.date
          },
          yAxis: {
            type: 'value',
            name: '倾斜 (°)',
            nameTextStyle: {
              color: '#ffffff'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            boundaryGap: false,
            max: 15.0,
            min: -15.0
            // splitLine: {
            //   show: false
            // }
          },
          series: [
            {
              name: '倾斜测点1',
              type: 'line',
              symbolSize: 10,
              showSymbol: false,
              hoverAnimation: false,
              data: this.slopeData
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
